#Chart.js

Chart.js へようこそ!

Chart.js を使ってみる— Chart.js を初めて使用する場合に最適です
からの移行Chart.js v3またChart.js v2
コミュニティに参加してくださいスラック (新しいウィンドウが開きます)とツイッター (新しいウィンドウが開きます)
のタグが付いた質問を投稿するchart.jsの上スタックオーバーフロー (新しいウィンドウが開きます)
Chart.js に貢献する

#Chart.js を使用する理由

の中多くのグラフ作成ライブラリ (新しいウィンドウが開きます)によると、JavaScript アプリケーション開発者にとって、Chart.js が現在最も人気のあるものです。GitHub のスター (新しいウィンドウが開きます)(~60,000) およびnpmのダウンロード (新しいウィンドウが開きます)(毎週約 2,400,000)。

Chart.js が作成され、発表された (新しいウィンドウが開きます)2013年に設立されましたが、それ以来長い道のりを歩んできました。オープンソースであり、非常に寛容なライセンスの下でライセンスされていますMITライセンス (新しいウィンドウが開きます)、活発なコミュニティによって維持されています。

#特徴

Chart.js は、頻繁に使用されるグラフの種類、プラグイン、およびカスタマイズオプションのセットを提供します。お得なセットに加えて、組み込みのグラフの種類、コミュニティが管理する追加のチャートの種類 (新しいウィンドウが開きます)。さらに、複数のチャートタイプを 1 つのチャートに組み合わせることができます。混合チャート(基本的に、複数のグラフタイプを同じキャンバス上で 1 つにブレンドします)。

Chart.js は高度にカスタマイズ可能です。カスタムプラグイン (新しいウィンドウが開きます)注釈の作成、ズーム、ドラッグアンドドロップなどの機能が挙げられます。

#デフォルト

Chart.js には健全なデフォルト構成が付属しているため、運用の準備が整ったアプリを簡単に開始して入手できます。オプションをまったく指定しなくても、非常に魅力的なチャートが得られる可能性があります。たとえば、Chart.js ではアニメーションがデフォルトでオンになっているため、データで伝えているストーリーに即座に注意を向けることができます。

#統合

Chart.js には TypeScript 型付け機能が組み込まれており、一般的なすべてのものと互換性があります。JavaScript フレームワーク (新しいウィンドウが開きます)含む反応する (新しいウィンドウが開きます)、ヴュー (新しいウィンドウが開きます)、スレンダー (新しいウィンドウが開きます)、と角度のある (新しいウィンドウが開きます)。 Chart.js を直接使用することも、選択したフレームワークとのよりネイティブな統合を可能にする適切に管理されたラッパーパッケージを利用することもできます。

#開発者の経験

Chart.js には非常に詳細なドキュメントがあります (はい、読んでいます)。APIリファレンス、と例。メンテナとコミュニティのメンバーは、熱心に会話に参加します。スラック (新しいウィンドウが開きます)、GitHub ディスカッション (新しいウィンドウが開きます)、とスタックオーバーフロー (新しいウィンドウが開きます)11,000 を超える質問にタグが付けられていますchart.js。

#キャンバスのレンダリング

Chart.js は、SVG としてレンダリングする他のほとんどの D3.js ベースのグラフ作成ライブラリとは異なり、HTML5 キャンバス上にグラフ要素をレンダリングします。 Canvas レンダリングにより、特に DOM ツリー内に数千の SVG ノードが必要となる大規模なデータセットや複雑なビジュアライゼーションにおいて、Chart.js のパフォーマンスが非常に高まります。同時に、キャンバスのレンダリングでは CSS スタイルを使用できないため、そのための組み込みオプションを使用するか、カスタムプラグインまたはチャートタイプを作成して、すべてを好みに合わせてレンダリングする必要があります。

#パフォーマンス

Chart.js は大規模なデータセットに非常に適しています。このようなデータセットは内部形式を使用して効率的に取り込むことができるため、データをスキップできます。解析すると正規化。あるいは、データ間引きレンダリング前にデータセットをサンプリングしてサイズを削減するように構成できます。

最終的に、Chart.js が使用するキャンバスレンダリングは、SVG レンダリングと比較して DOM ツリーへの負担を軽減します。また、ツリーシェイキングのサポートにより、Chart.js コードの最小限の部分をバンドルに含めることができ、バンドルのサイズとページの読み込み時間を削減できます。

#コミュニティ

Chart.js は積極的に開発された (新しいウィンドウが開きます)そしてコミュニティによって維持されます。未成年者ありリリース (新しいウィンドウが開きます)Chart.js は、約 2 か月ごとに、重大な変更を伴うメジャーリリースを数年ごとにリリースし、新機能の追加と、それらに対応するのが面倒になることの間のバランスを保っています。

入門→